<template>
  <el-menu
    default-active="2"
    class="menu-vertical"
    @open="handleOpen"
    @close="handleClose"
    @select="handleSelect"
  >
    <el-menu-item v-for="menu in menus" :key="menu.name" :index="menu.path">
      <i class="el-icon-menu" />
      <span slot="title">
        {{ menu.description }}
      </span>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  data: () => {
    return {
      menus: [{
        name: 'index',
        path: '/',
        description: '首页'
      }, {
        name: 'hello',
        path: '/hello',
        description: '问候'
      }, {
        name: 'about',
        path: '/about',
        description: '关于'
      }]
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      // eslint-disable-next-line
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      // eslint-disable-next-line
      console.log(key, keyPath)
    },
    handleSelect (key, keyPath) {
      // eslint-disable-next-line
      console.log(key, keyPath)
      location.href = key
      this.increment()
    },
    increment () {
      this.$store.commit('increment')
    }
  }
}
</script>

<style>
.menu-vertical {
  height: 100%;
}
</style>
